/* Defined colors */
$black: #454c59;
$black-darker: #282c34;

$red: #ff7a85;
$red-darker: #e06c75;

$green: #b5e890;
$green-darker: #98c379;

$yellow: #ffd68a;
$yellow-darker: #e5c07b;

$blue: #69bbff;
$blue-darker: #61afef;

$magenta: #e48aff;
$magenta-darker: #c678dd;

$cyan: #66d9e8;
$cyan-darker: #56b6c2;

$white: #cfd7e6;
$white-darker: #abb2bf;

$element-background-color: #38384d;

* {
  all: unset;
  font-family: DaddyTimeMono NF;
  font-family: icomoon;
}

/** General **/
.bar_class {
  background-color: #1e2127;
}

/** tooltip!! **/
tooltip.background {
  background-color: #1e2127;
  font-size: 18;
  border-radius: 10px;
  color: #bfc9db;
}

tooltip label {
  margin: 6px;
}

/** Widgets **/

.icon_clock {
  color: $black-darker;
  font-size: 16px;
  margin: 8px 10px 8px 5px;
  padding: 0px 8px;
  border-radius: 5px;
  background-color: $white;
}

.icon_clock_fake_background {
  border-radius: 0px;
  background-color: $element-background-color;
  margin: 8px 0px 8px 5px;
  border-radius: 5px 0px 0px 5px;
}

.clock_module {
  background-color: $element-background-color;
  margin: 8px 0px 8px 0px;
  padding: 0px 0px 0px 10px;
  border-radius: 0px 5px 5px 0px;
}

.clock_time_sep {
  color: #bfc9db;
  margin: 0px 4px 1px 4px;
}
.clock_time_class,
.clock_minute_class,
.clock_time_sep,
.clock_calendar {
  font-size: 18;
}
.clock_minute_class {
  margin: 0px 10px 0px 3px;
  color: #bfc9db;
}

.clock_time_class {
  color: #bfc9db;
  font-weight: bold;
  margin: 0px 5px 0px 0px;
}

.clock_calendar {
  background-color: #2d2d40;
  margin: 8px 11px 8px 0px;
  padding: 0px 10px 0px 10px;
  border-radius: 0px 5px 5px 0px;
  color: #bfc9db;
}
.mem_bar {
  margin: 5px 0px 5px 0px;
  color: $yellow-darker;
  background-color: $element-background-color;
}
.therm_bar {
  margin: 5px 0px 5px 0px;
  color: $blue-darker;
  background-color: $element-background-color;
}
.cpu_bar {
  margin: 5px 0px 5px 0px;
  color: $green-darker;
  background-color: $element-background-color;
}
.brightbar trough highlight {
  background-image: linear-gradient(
    to right,
    $yellow-darker 30%,
    $yellow 50%,
    #ffe3b0 100%
  );
  border-radius: 10px;
}
.volbar trough highlight {
  background-image: linear-gradient(
    to right,
    $blue-darker 30%,
    $blue 50%,
    #c3e2fb 100% * 50
  );
  border-radius: 10px;
}
.icon_volume {
  font-size: 22;
  color: $blue;
  margin: 0px 8px 0px 10px;
}

.volume_text {
  padding: 2px 5px 2px 5px;
  margin: 10px 0px 10px 10px;
  border-radius: 5;
  background-color: $blue;
  font-size: 12;
  color: black;
}

.module_essid {
  font-size: 18;
  color: $magenta;
}
.module-wifi {
  font-size: 22;
  color: #a1bdce;
  border-radius: 100%;
  margin: 0px 10px 0px 5px;
}

.icon_bat {
  margin: 10px 0px;
  padding: 0px 8px;
  font-size: 14px;
  border-radius: 5px;
  color: #2b3332;
  background-color: $cyan;
}

.icon_bat_fake_background {
  margin: 10px 0px;
  background-color: #3c414a;
}

.text_bat {
  margin: 10px 0px 10px 0px;
  padding: 3px 8px;
  border-radius: 0px 5px 5px 0px;
  font-size: 14px;
  color: $cyan;
  background-color: #3c414a;
}

.icon_mem {
  color: $yellow;
}
.icon_cpu {
  color: $green;
}

.icon_therm {
  color: $blue;
}
.icon_cpu,
.icon_therm,
.icon_mem {
  font-size: 12px;
  margin: 10px;
}

.icon_brightness {
  font-size: 22;
  color: $yellow;
  margin: 0px 10px 0px 10px;
}

.brightness_text {
  background-color: $yellow;
  padding: 2px 5px 2px 5px;
  margin: 10px 0px 10px 15px;
  border-radius: 5;
  font-size: 12;
  color: black;
}

.separ {
  color: #3e424f;
  font-weight: bold;
  font-size: 25px;
  margin: 0px 8px 0px 8px;
}

.mem_module {
  margin: 0px 10px 0px 3px;
}
.bat_module {
  padding: 0px 10px 0px 0px;
  margin: 8px 10px 8px 10px;
}

.therm_module {
  margin: 0px 10px 0px 3px;
}
.cpu_module {
  margin: 0px 10px 0px 3px;
}

scale trough {
  all: unset;
  background-color: #3c414a;
  box-shadow: 0 2px 3px 3px #06060b;
  border-radius: 16px;
  min-height: 10px;
  min-width: 70px;
  margin: 0px 10px 0px 0px;
}

// Workspaces
.w,
.w1,
.w2,
.w3,
.w4,
.w5,
.w6,
.w11,
.w22,
.w33,
.w44,
.w55,
.w66 {
  font-size: 15;
  margin: 10px 0px 0px 0px;
}

/* Unoccupied */
.w {
  color: #3e424f;
}

/* Occupied */
.w1 {
  color: $blue;
}
.w2 {
  color: $red;
}
.w3 {
  color: $green;
}
.w4 {
  color: $yellow;
}
.w5 {
  color: $white;
}
.w6 {
  color: $magenta;
}

/* Focused */
@for $i from 1 through 6 {
  .w#{$i}#{$i} {
    padding: 0px 0px 5px 0px;
    border-style: none none solid;
    border-width: 2px;
    @extend .w#{$i};
    border-color: white;
  }
}

// Calendar
.cal {
  background-color: #0f0f17;
  font-family: JetBrainsMono Nerd Font;
  font-size: 18px;
  font-weight: normal;

  .cal-in {
    padding: 0px 10px 0px 10px;
    color: #bfc9db;

    .cal {
      &.highlight {
        padding: 20px;
      }

      padding: 5px 5px 5px 5px;
      margin-left: 10px;
    }
  }
}

calender {
  color: #bfc9db;
}
calendar:selected {
  color: #a1bdce;
}

calendar.header {
  color: #a1bdce;
  font-weight: bold;
}

calendar.button {
  color: #afbea2;
}

calendar.highlight {
  color: #a1bdce;
  font-weight: bold;
}

calendar:indeterminate {
  color: #bfc9db;
}

.audio-box {
  background-color: #0f0f17;
  border-radius: 16px;
}
.speaker_icon {
  background-size: cover;
  background-image: url("images/speaker.png");
  background-position: center;
  min-height: 70px;
  min-width: 75px;
  margin: 10px 20px 5px 20px;
  border-radius: 12px;
}

.speaker_text {
  color: #a1bdce;
  font-size: 26px;
  font-weight: bold;
  margin: 20px 0px 0px 0px;
}

.speaker_bar scale trough highlight {
  all: unset;
  background-image: linear-gradient(
    to right,
    #afcee0 30%,
    #a1bdce 50%,
    #77a5bf 100% * 50
  );
  border-radius: 24px;
}
.speaker_bar scale trough {
  all: unset;
  background-color: #232232;
  box-shadow: 0 6px 5px 2px #06060b;
  border-radius: 24px;
  min-height: 13px;
  min-width: 120px;
  margin: 0px 0px 5px 0px;
}

.mic_icon {
  background-size: cover;
  background-image: url("images/mic.png");
  background-position: center;
  min-height: 70px;
  min-width: 75px;
  margin: 5px 20px 20px 20px;
  border-radius: 12px;
}

.mic_text {
  color: #a1bdce;
  font-size: 26px;
  font-weight: bold;
  margin: 0px 0px 0px 0px;
}

.mic_bar scale trough highlight {
  all: unset;
  background-image: linear-gradient(
    to right,
    #afcee0 30%,
    #a1bdce 50%,
    #77a5bf 100% * 50
  );
  border-radius: 24px;
}
.mic_bar scale trough {
  all: unset;
  box-shadow: 0 6px 5px 2px #06060b;
  background-color: #232232;
  border-radius: 24px;
  min-height: 13px;
  min-width: 120px;
  margin: 0px 0px 20px 0px;
}

.audio_sep {
  color: #38384d;
  font-size: 18;
  margin: 0px 0px 0px 0px;
}
